<template>
	<view class="bottom">
		<view class="bottom_info">
				<view class="info_name">店铺名称</view>
				<input type="text" v-model="seller_info.name" placeholder="请输入店铺名称" />
		</view>
		<view class="bottom_info" @click="showCategory = true">
				<view class="info_name">分类</view>
				<input type="number" v-model="sellerType" placeholder="请输入店铺分类" :disabled="true" />
		</view>
		<view class="bottom_info">
				<view class="info_name">电话</view>
				<input type="text" v-model="seller_info.tel" placeholder="请输入电话" />
		</view>
		<view class="bottom_info">
				<view class="info_name">手机号</view>
				<input type="text" v-model="seller_info.mobile" placeholder="请输入手机号" />
		</view>
		<view class="bottom_info" @click="showPicker">
				<view class="info_name">地区</view>
				<view class="right">
					<input  class="info_choose2" type="text" v-model="seller_info.address" placeholder="请选择"  :disabled="true" />
					<image :src="arrow_right" mode=""></image>
				</view>
		</view>
		<view class="bottom_info">
				<view class="info_name">营业地址</view>
				<input type="text" v-model="seller_info.place" placeholder="请输入营业地址" />
		</view>
		<view class="bottom">
			<view class="botton tc" @click="getSubmit">
				{{title}}
			</view>
		</view>
		<u-picker mode="region" v-model="show" :area-code='["13", "1303", "130304"]' @confirm="confirm" :params="params"></u-picker>
		<u-select v-model="showCategory" :list="categoryList" value-name="id" label-name="name" @confirm="confirmShop"></u-select>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
export default {
    props: {
    },
    computed: {
		...mapState({
			info: state => state.address.info,
			categoryList: state => state.sellers.category,
		}),
	},
    data() {
        return {
			showCategory: false,
			title: "提交",
			address: "",
			arrow_right: this.imgUrl + 'arrow_right.png',	//图标
			seller_info: {
				member_id: 1,
				name: '',
				shop_category_id: '',
				mobile: '',
				tel: '',
				address: '',
				place: '',
				lat: '',
				lng: ''
			},
			sellerType: '',
			show: false,
			params :{
				province: true,
				city: true,
				area: true
			},
			list: []
		};
    },
	mounted() {
		this.categoryList.splice(this.categoryList.findIndex(item => item.id === 0), 1)
	},
    methods: {
		confirmShop(val) {
			this.seller_info.shop_category_id = val[0].value
			this.sellerType = val[0].label
		},
		confirm(params) {
			this.seller_info.address = params.province.label + params.city.label + params.area.label
		},
		getSubmit() {
			this.$emit('getSubmit',this.seller_info)
		},
		showPicker() {
			this.show = true
		},
		onPlace(val) {	
			this.province = val.province.label;
			this.city = val.city.label;
			this.area = val.area.label;
			this.address =  val.province.label+ " " +val.city.label+ " "+val.area.label
		}
	},
};
</script>

<style lang="scss" scoped>
	.bottom{
		padding-bottom: 60rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	.bottom_info + .bottom_info {
		border-top: 2rpx #eee solid;
	}	
	.bottom_info {
		padding: 42rpx 24rpx;
		display: flex;
		position: relative;
		justify-content: space-between;
		text-align: right;
		image{
				width: 24px;
				height: 24px;
		}
		.right {
			display: flex;
		}
		.info_choose1{
			color: #999;
			&::before {
				width: 24px;
				height: 24px;
				content: "";
				position: absolute;
				right: 24rpx;
				top: 55%;
				transform: translateY(-60%);
				background-repeat: no-repeat;
				background-size: 100%;
			}
		}
		.info_choose2{
			color: #999;
			&::before {
				width: 24px;
				height: 24px;
				content: "";
				position: absolute;
				right: 24rpx;
				top: 42rpx;
				background-repeat: no-repeat;
				background-size: 100%;
			}
		}

	}
}
.bottom {
	margin: 20rpx 24rpx;
	.botton {
		color: #fff;
		line-height: 88rpx;
		border-radius: 40rpx;
		background: linear-gradient(84deg,#ff2d1b 5%, #ff3421 5%, #ff977b 94%);
	}
}
</style>
